<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
  <div id="mouse-position"></div>
</template>
<script setup>
import * as Cesium from 'cesium'
import CesiumNavigation from 'cesium-navigation-es6'
import { onMounted } from 'vue';
import {cesiumViewer} from './cesium/init.js'
import {MousePostion} from './cesium/mousePostion.js'
import {modifyMap} from './cesium/modifyMap.js'
import {modifyBuild} from './cesium/modifyBuild.js'
import {LightCone} from './cesium/lightCone.js'
import {RectFlyLight} from './cesium/rectFlyLight.js'
import RoadLine from './cesium/roadLine'
import Radar from './cesium/radar'
import LightSpread from './cesium/LightSpread'
import LightWall from './cesium/LightWall'
onMounted(async() => {
  let options = {
    enableCompass: true
  }
  let viewer = cesiumViewer()
  new MousePostion(viewer)
  new CesiumNavigation(viewer, options)
  modifyMap(viewer)
  modifyBuild(viewer)
  new LightCone(viewer)
  new RectFlyLight(viewer)
  new RoadLine(viewer)
  new Radar(viewer)
  new LightSpread(viewer)
  new LightWall(viewer)
})
</script>

<style scoped>

</style>
